<template>
	<view class="box" >
		<view class="imageBox" :style="{gap:`${getImgStyle(imgCount).gap}`}">
			<view 
				v-for="item in imgList" 
				class="image-item" 
				:style="{
					width:`${getImgStyle(imgCount).width}`,
					height:`${getImgStyle(imgCount).height}`,
					paddingBottom:`${getImgStyle(imgCount).paddingBottom}`
				}"
			>
				<image :src="item" mode="aspectFill" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				imgList:[
					'../../../static/tlltt.png',
					'../../../static/login_group.png',
					'../../../static/login_group.png',
					'../../../static/login_group.png',
					'../../../static/login_group.png',
				]
			}
		},
		computed:{
			imgCount(){
				return this.imgList.length
			}
		},
		methods:{
			getImgStyle(num){
				if(num === 1){
					return {
						width:'360rpx',
						height:'266rpx',
						paddingBottom:'266rpx',
						gap:'0rpx'
					}
				}else if(num === 2){
					return {
						width:'312rpx',
						height:'232rpx',
						paddingBottom:'232rpx',
						gap:'24rpx'
					}
				}else if(num === 3){
					return {
						width:'206rpx',
						height:'152rpx',
						paddingBottom:'152rpx',
						gap:'16rpx'
					}
				}else if(num === 4){
					return {
						width:'312rpx',
						height:'232rpx',
						paddingBottom:'232rpx',
						gap:'24rpx'
					}
				}
				return {
					width:'206rpx',
					height:'152rpx',
					paddingBottom:'152rpx',
					gap:'16rpx'
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.box {
	.imageBox {
		position: relative;
		overflow: hidden;
		margin-bottom: 2%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		
		.image-item{
			position: relative;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				background-size: cover;
				background-position: center;
				position: absolute;
				top:50%;
				left:50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
	}
}
</style>